<template>
  <bc-modal v-show="showConfirmationTips">
    <div class="order-operate">
      <div class="title">
        <div class="left">
          <span class="icon hover-style">
            <i class="iconfont icontips_tishi"></i>
          </span>
        </div>
        <div class="center">
          提示
        </div>
        <div class="right">
          <span class="icon"  @click="cancelConfirmation">
            <i class="iconfont iconty_guanbi"></i>
          </span>
        </div>
      </div>
      <div class="content">
        <p class="tips">
          <span>确定投注</span>
          第
          <span>【{{getLotteryDateNo}}】</span>
          期吗？
        </p>
        <p class="order-info">
          <span class="qty info-item">
            共<span class="red">{{totalQuantity}}</span>注，
          </span>
          <span class="amount info-item">
            合计<span class="red">{{totalAmount}}</span>元
          </span>
        </p>
        <div class="btns">
          <button class="btn button-unselected hover-style" @click="cancelConfirmation">取消</button>
          <button class="btn button-selected hover-style" @click="handleFinalConfirm">确认投注</button>
        </div>
      </div>
    </div>
  </bc-modal>
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import { mapGetters } from 'vuex'
export default {
  components: {
    BcModal
  },
  props: {
    totalAmount: {
      type: Number,
      default: 10
    },
    totalQuantity: {
      type: Number,
      default: 10
    },
    showConfirmationTips: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    cancelConfirmation() {
      this.$emit('click', false)
    },
    handleFinalConfirm() {
      let id = this.getLotteryType.id 
      this.$router.push({path: '/order/success'})
      this.$emit('clear')
    },
  },
  computed: {
    ...mapGetters('lottery', ['getLotteryDateNo', 'getLotteryType'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .order-operate
    min-height 215px
    width 100px
    background-color #fff
    position absolute
    width 320px
    top 50%
    left 50%
    transform translate(-50%, -50%)
    border-radius 6px
    .title 
      display flex 
      font-size 100
      align-items center
      height 48px 
      background-color $color-theme-dark
      box-sizing border-box 
      padding 0 10px
      justify-content space-between
      border-top-left-radius 6px 
      border-top-right-radius 6px
      .left 
        .icon 
          width 20px
          height 20px 
          display flex 
          extend-click()
          .iconfont 
            color #fff 
            font-size 20px
      .center 
        color #fff
      .right 
        .icon
          width 20px
          height 20px
          color $color-theme-red
          display flex 
          align-items center
          extend-click()
          .iconfont 
            font-size 22px
    .content
      box-sizing border-box 
      padding 0 10px 
      text-align center
      .tips 
        margin-top 35px 
      .order-info  
        margin-top 14px 
        margin-bottom 40px
        .info-item 
          .red 
            color $color-theme-red 
            font-size 20px
            margin 0 3px
      .btns 
        font-size 0
        .btn 
          width 99px
          height 36px 
          font-size 14px 
          margin-right 10px 
</style>